<template>
    <div class="stylePage">
        <div style="display: inline-block;margin-left:80px;width:35%">
            <!-- 按钮 -->
            <div class="buttons" style="">
                <el-button @click="getCheckedNodes" type="info" icon="el-icon-minus">删除</el-button>
                <el-button @click="resetChecked" icon="el-icon-refresh">清空</el-button>
            </div>
            <!-- 树状图 -->
            <div class="tree" style="margin-top:20px">
                <el-tree
                v-loading="loading"
                :data="data"
                show-checkbox
                default-expand-all
                check-on-click-node
                node-key="id"
                ref="tree"
                :props="defaultProps"
                @node-click="getPresent">
                </el-tree>
            </div>
        </div>
        
        <!-- 修改框 -->
        <div class="updateDiv" style="display: inline-block;float: right;margin:40px 80px 0px 0px">
            <!-- 不为空 -->
            <div class="updatePage">
                <el-form label-width="auto" :model="present">
                    <!-- <el-form-item label="编号">
                        <el-input v-model="present.id" disabled style="width: 500px;"></el-input>
                    </el-form-item> -->
                    <el-form-item label="商品类型">
                        <el-input v-model="present.classificationName" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="序号">
                        <el-input v-model="present.parentDirectory" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="父级">
                        <el-select v-model="present.parentId" clearable>
                            <el-option
                            :lable="data.parentId"
                            :value="data.classificationName">
                            </el-option>
                            <el-tree :data="data" :props="defaultProps" @node-click="updateFu"></el-tree>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input type="textarea" v-model="present.remarks" style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item class="button">
                        <el-button type="primary" icon="el-icon-plus" @click="setCheckedNodes">添加</el-button>
                        <el-button type="success" icon="el-icon-edit" @click="submitForm()">修改</el-button>
                        <el-button icon="el-icon-refresh-right" @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
  export default {
    data() {
      return {
        data: [],
        present:{
            id:'',
            classificationName:'',
            parentDirectory:'',
            remarks:'',
            deleteFlog:'',
            parentId:'',
            children:''
        },
        loading: false,
        presentRe:{
            id:'',
            classificationName:'',
            parentDirectory:'',
            remarks:'',
            deleteFlog:'',
            parentId:'',
            children:'',
            aaa:""
        },
        defaultProps: {
          children: 'children',
          label: 'classificationName'
        },
        returnId:[],
      };
    },
    created() {
        this.getComputedStyle();
        
    },
    methods: {
        // 返回树信息
        async getComputedStyle(){
            this.loading=true
            const {data:style} = await axios.get("http://localhost:8082/commodity/getCommodityStyle");
            this.loading=false;
            this.data = style;
        },
        // 单个菜单交给表单
        async getPresent(row){
            console.log(row)
            this.present.id = row.id;
            this.present.classificationName = row.classificationName;
            this.present.parentDirectory = row.parentDirectory;
            this.present.remarks = row.remarks;
            this.present.deleteFlog = row.deleteFlog;
            this.present.parentId = row.parentId;
            this.present.children = row.children;
             if(row.parentId!=null){
                const {data:style} = await axios.get("http://localhost:8082/commodity/getCommodityStylePresent?id="+row.parentId);
                // console.log("---父级菜单---")
                // console.log(style)
                this.aaa = style.classificationName;
            }
        }, 
        // 改变单个树形枝干的父级
        updateFu(row){
            this.present.parentId = row.id;
              this.aaa = row.classificationName;
             this.aaa = row.classificationName;
            console.log(row);
        },
        // 删除
        async getCheckedNodes() {
            const num = this.$refs.tree.getCheckedNodes()
            console.log(num)
            // this.returnId = num
            // console.log(num.children.length)
            num.forEach(x=>{
                if(x.children==null && x.children==undefined){
                    this.returnId.push(x.id)
                }
            })
            console.log(this.returnId)
            const {data:style} = await axios.post("http://localhost:8082/commodity/deleteCommodities",this.returnId);
            if(style.flag=="ok"){
                this.data = style.style;
                return this.$message.success("操作成功");
            }
            this.$message.error("操作失败");
        },
        // 添加
        setCheckedNodes(){
             console.log(this.present)
            axios.post("http://localhost:8082/commodity/insertCommStyle",this.present).then(res=>{
                console.log(res)
                if(res.data>0){
                    this.$message.success("操作成功");
                }else{
                    this.$message.error("操作失败");
                }
            })
            this.getComputedStyle();
        },
        // 清空
        resetChecked() {
            this.$refs.tree.setCheckedKeys([]);
        },
        // 修改
        async submitForm() {
            const {data:style} = await axios.post("http://localhost:8082/commodity/updateCommodity",this.present);
            if(style.flag=='ok'){
                this.data = style.style;
                return this.$message.success("操作成功");
            }
            this.$message.error("操作失败");
            console.log(style)
      },
        // 表单 重置
      resetForm() {
          this.present = this.presentRe;
      }
    },
  };
</script>
<style lang="less" scoped>

</style>